@import "base.less";

#ui-message-loading{
  .fixed(0,0,0,0,auto,auto,20171010);
  background-color:rgba(255,255,255,0);
  visibility:hidden;
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-timing-function:ease-in;
  -webkit-animation-timing-function:ease-in;
  &.actived{
    visibility:visible;
    animation-name:fadeIn;
    -webkit-animation-name:fadeIn;
  }
  &:before,&:after{
    content:"";
  }
  &:before{
    .fixed(50%,50%,auto,auto,120px,120px,2000);
    margin-left:-60px;
    margin-top:-120px;
    background-color:rgba(0, 0, 0, .7);
    content:"\52a0\8f7d\4e2d\002e\002e\002e";
    text-align:center;
    box-sizing: border-box;
    padding-top:85px;
    display:block;
    .round(6px);
    .boxshadow(inset 0 0 20px rgba(0,0,0,0.4));
    text-align:center;
    color:rgba(255,255,255,.8);
  }
  &:after{
    .fixed(50%,50%,auto,auto,70px,70px,2001);
    margin-left:-35px;
    margin-top:-110px;
    content:"";
    display: block;
    .background-image('loading.svg');
    .background-attr(center center,contain,no-repeat);
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: afterAni;
    -webkit-animation-name: afterAni;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  @keyframes afterAni{
    from{
      transform:rotate(0);
    }
    to{
      transform:rotate(360deg);
    }
  }
  @-webkit-keyframes afterAni{
    from{
      transform:rotate(0);
    }
    to{
      transform:rotate(360deg);
    }
  }
}
